<template>
  <div class="k-w">
    <div class="k-tool-bar">
      <div class="k-btn small " @click="goBack">
        <&nbsp;返回 </div>
      </div>
      <div class="k-section">
        <div class="k-title" v-show="isNotPersonalHomePage">
          {{personalCategory}}
        </div>
        <router-view> </router-view>
        <div class="k-tc" v-show="isNotPersonalHomePage">
          <el-pagination ref="personalPagination" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChange" @current-change="currentChange"
            :current-page.sync="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
</template>
<script>
  import {
    pagination,
    search,
    personal
  } from 'fac/mixin.js';

  import {
    mapState,
    mapGetters,
    mapMutations
  } from 'vuex';
  import {
    NS
  } from 'fac/constant'
  const NS_HOME = NS.HOME;
  const NS_SEARCH = NS.SEARCH;
  const NS_PERSONAL = NS.PERSONAL;
  const NS_PAGINATION = NS.PAGINATION;
  //个人中心命名空常量

  export default {
    name: NS_PERSONAL,
    mixins: [pagination, search, personal],
    data() {
      return {}
    },
    computed: {
      ...mapState(NS_PAGINATION, {
        pageSize: (state) => state.pageSizes[0],
        pageSizes: 'pageSizes',
        total: 'total'
      }),

      ...mapState(NS_PERSONAL, ['category']),

      personalCategory() {
        return this.category[this.$route.meta];
      }
    },
    methods: {
      ...mapMutations(NS_PAGINATION, [
        'sizeChange',
        'currentChange',
        'refreshPagination'
      ]),
      goBack() {
        this.$router.push(this.isNotPersonalHomePage ? {
          name: NS_PERSONAL
        } : {
          name: NS_HOME
        });
      }
    },
    mounted() {
      this.refreshPagination(1);
    }
  }

</script>
